<template>
  <!--预览资源组件-->
  <div id="PreviewFileContainer" class="PreviewFileContainer" oncontextmenu="return false;">
    <div class="rightContent" v-if="initload">
      <div class="sourceBox">
        <!-- <div v-if="islimited" class="source-name" style="margin-bottom: -0.9rem;">
          <div class="lesson" style="text-align:center;">正在备课中......</div>
        </div>-->
        <div id="source-package" class="source-package" :style="islimited?'padding: 1rem;':''">
          <!--mp3、mp4-->
          <div id="videoContainer" class="videoContainer" v-if="sourceType==1||sourceType==2">
            <videoPlayer
              class="video-player vjs-custom-skin videostyle"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
            ></videoPlayer>
          </div>
          <!--图片-->
          <div id="picContainer" class="picContainer" v-else-if="sourceType==3">
            <img class="imgnormal" :src="picOption.url" />
          </div>
          <!--html-->
          <div class="htmlContainer" v-else-if="sourceType==5">
            <iframe
              style="height:100%;width:100%;border: none;"
              allowfullscreen="true"
              :src="htmldata.html"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
import { videoPlayer } from "vue-video-player";
import pdf from "vue-pdf";
import "video.js/dist/video-js.css";
export default {
  components: { videoPlayer, pdf },
  data() {
    return {
      initload: false,
      screenheight: 0, //屏幕高度
      leftSourceList: null, //左菜单对象
      timespan: 1600, //1600s后重取一次地址
      sourceType: 0, //1 视频MP4 2.音频MP3 3.图片 4.pdf 5.html
      playerOptions: {
        //视频音频配置
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        controls: true, //控制条：boolean
        language: "zh-CN",
        aspectRatio: "10:5", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          PlayToggle: false,
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      },
      picOption: {
        //图片配置
        url: ""
      },
      pdfData: {
        //pdf配置
        currentPage: 0,
        tempPage: 0, //临时当前页
        pageCount: 0,
        pdfsrc: ""
      },
      htmldata: {
        //html配置
        loading: false,
        html: ""
      },
      /**是否显示限制上课的样式 */
      islimited: true
    };
  },

  methods: {
    /**
     * 初始化
     */
    init() {
      let id = vm.$route.query.resourceId;
      let index = vm.$route.query.index;
      vm.getFileurl(id, index);
      vm.initload = true;

      //				$(document).keydown(function(e){
      //					if(e.key=="F12")return false;
      //				})
    },
    /**
     * 加载文件
     */
    load(index, li) {
      vm.initload = true;
      switch (index) {
        case 1: {
          //mp4
          //vm.playerOptions.poster = "";
          let newurl = tool.decrypt(li.accessUrl);
          vm.playerOptions.sources.push({ type: "video/mp4", src: newurl });
          vm.playerOptions.autoplay = true;
          vm.$nextTick(function() {
            //dom更新完毕回调
            let video = $(".videostyle .video-js .vjs-tech");
            video.removeClass("bgactive");
          });
          break;
        }
        case 2: {
          //MP3
          let newurl = tool.decrypt(li.accessUrl);
          vm.playerOptions.sources.push({ type: "audio/mp3", src: newurl });
          vm.playerOptions.autoplay = true;
          vm.$nextTick(function() {
            //dom更新完毕回调
            let video = $(".videostyle .video-js .vjs-tech");
            video.addClass("bgactive");
          });

          break;
        }
        case 3: {
          //图片
          //tool.test();

          let newurl = tool.decrypt(li.accessUrl);

          vm.picOption.url = newurl;

          break;
        }
        case 4: {
          //pdf
          let newurl = tool.decrypt(li.accessUrl);
          vm.loadpdf(newurl);
          //vm.loadpdf('../../../static/'+li.sourcename);
          break;
        }
        case 5: {
          //html
          let newurl = tool.decrypt(li.accessUrl);
          //   let param = {
          //     accept: "text/html, text/plain"
          //   };
          //  axios.get(newurl, param)
          //     .then(response => {
          //       // 处理HTML显示
          //       vm.htmldata.html = response.data;
          //     });
          vm.htmldata.html = newurl;
        }
      }
    },

    /**
     * 禁止右键菜单
     */
    doNothing() {
      window.event.returnValue = false;

      return false;
    },
    /**
     * 获取文件类型码
     */
    getFileType(suffix) {
      let type = 0;
      switch (suffix) {
        case ".jpg": {
          type = 3;
          vm.sourceType = 3;
          break;
        }
        case ".png": {
          type = 3;
          vm.sourceType = 3;
          break;
        }
        case ".html": {
          type = 5;
          vm.sourceType = 5;
          break;
        }
        case ".mp3": {
          type = 2;
          vm.sourceType = 2;
          break;
        }
        case ".mp4": {
          type = 1;
          vm.sourceType = 1;
          break;
        }
        default: {
          type = 5;
          vm.sourceType = 5;
          break;
        }
      }

      return type;
    },
    /**
     * 取文件有效地址
     */
    getFileurl(resourceId, index) {
      if (index == "1") {
        api
          .getDownloadResourceAccessUrl({ resourceId: resourceId })
          .then(function(data) {
            if (data.data.resultCode != 2000) {
              vm.$message({
                message: data.data.result,
                type: "error"
              });
              return;
            } else {
              let li = {
                resourceId: resourceId,
                type: vm.getFileType("." + data.data.info.resourceSuffix),
                accessUrl: data.data.info.accessUrl
              };
              // li.accessUrl = data.info.accessUrl;
              vm.load(li.type, li);
            }
          });
      } else {
        api
          .getResourceAccessUrl({ resourceId: resourceId })
          .then(function(data) {
            if (data.resultCode != 2000) {
              vm.$message({
                message: data.result,
                type: "error"
              });
              return;
            } else {
              console.log(data.info.resourceSuffix);
              let li = {
                resourceId: resourceId,
                type: vm.getFileType("." + data.info.resourceSuffix),
                accessUrl: data.info.accessUrl
              };
              // li.accessUrl = data.info.accessUrl;
              vm.load(li.type, li);
            }
          });
      }
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  mounted() {
    vm = this;
    vm.init();
    vm.screenheight = $(window).height();
    window.onresize = function() {
      let w = $(window).height();
      if (vm.leftSourceList == null) {
        vm.leftSourceList = $(".leftSourceList");
      }

      if (w < vm.screenheight) {
        vm.leftSourceList.css("height", vm.screenheight + "px");
      } else {
        vm.leftSourceList.css("height", "");
      }
    };
  },
  watch: {
    // 利用watch方法检测路由变化：
    $route: function(to, from) {
      // 拿到目标参数 to.query.resourceId 去再次请求数据接口
      vm.getFileurl(to.query.resourceId, to.query.index);
    }
  }
};
</script>

<style lang="scss">
.PreviewFileContainer {
  width: 100%;
  height: 100%;
  .rightContent {
    width:100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    padding: 0 2rem;
    .sourceBox {
      width: 100%;
      height: calc(100% - 0.81rem);
      padding: 0rem 0.7rem;
      margin-top: 1rem;
      .source-name {
        width: 100%;
        height: 0.8rem;
        cursor: pointer;
        .lesson {
          width: 100%;
          height: 0.5rem;
          line-height: 0.7rem;
          font-size: 0.18rem;
          font-weight: bold;
          color: #141414;
        }
        .source {
          width: 100%;
          height: 0.3rem;
          line-height: 0.2rem;
          font-size: 0.16rem;
          color: #333333;
        }
      }
      .source-package {
        width: 100%;
        height: 7.6rem;
        overflow: auto;
        margin-top: 0.1rem;
        background: #f3f6fd;
        &::-webkit-scrollbar {
          width: 0.03rem;
          height: 0;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 0.01rem;
          background: #3887fe;
        }

        .videoContainer {
          width: 100%;
          height: 100%;
          display: flex;
          align-content: center;
          justify-content: center;
          .videostyle {
            width: 100%;
            height: 100%;
            align-self: center;
            .bgactive {
              background-size: 100% 100%;
              background: url(../../assets/img/common/mp3.png);
              background-position: center;
              background-repeat: no-repeat;
            }
          }
          .video-js .vjs-fullscreen-control {
            display: none;
          }
        }

        .picContainer {
          width: 100%;
          height: 100%;
          display: flex;
          align-content: center;
          justify-content: center;
          .imgnormal {
            width: auto;
            height: 7rem;
            align-self: center;
          }
          .imgzoom {
            width: 90%;
            height: auto;
            align-self: flex-start;
          }
          .zoom {
            cursor: url("../../assets/img/common/zoomicon.png"), auto;
          }
          .zoomout {
            cursor: url("../../assets/img/common/zoomouticon.png"), auto;
          }
        }
        .htmlContainer {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>